import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
  ScrollView,
  Image,
} from 'react-native';
import DatePicker from 'react-native-datepicker';
import NavCon from '../Public/NavCon';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import FilterBtn from './FilterBtn';
import { fetchMyCustomerList } from '../../actions/SaleListActions';
import { fetchFilterMy } from '../../actions/SaleChanceFilterAction';

class MyCustomerFilter extends Component {
  constructor(props) {
    super(props);
    const FilterObjMy = this.props.FilterObjMy;
    if (FilterObjMy) {
      this.state = {
        words: FilterObjMy.voice === 1,
        note: FilterObjMy.note === 1,
        driver: FilterObjMy.testdrive === 1,
        collect: FilterObjMy.collect === 1,
        connect: FilterObjMy.voice === 1,
        price: FilterObjMy.bj === 2,
        makeDrive: FilterObjMy.sy === 3,
        experience: FilterObjMy.dt === 4,
        bargain: FilterObjMy.cj === 5,
        giveUp: FilterObjMy.fq === 6,
        others: FilterObjMy.qt === 7,
        desc: FilterObjMy.intention === 1, // 降序
        asce: FilterObjMy.intention === 2, // 升序
        visitDateTime: this._getDate(),
        time: FilterObjMy.time ? FilterObjMy.time : '选择拜访时间',
      };
    } else {
      this.state = {
        words: false,
        note: false,
        driver: false,
        collect: false,
        connect: false,
        price: false,
        makeDrive: false,
        experience: false,
        bargain: false,
        giveUp: false,
        others: false,
        desc: false, // 降序
        asce: false, // 升序
        visitDateTime: this._getDate(),
        time: '选择拜访时间',
      };
    }
  }
  _goBack() {
    this.props.navigator.pop();
  }

  _getDate() {
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month.toString().length === 1) {
      month = `0${month}`;
    }
    if (day.toString().length === 1) {
      day = `0${day}`;
    }
    return `${year}-${month}-${day}`;
  }

  toggleSelect = (name, state) => {
    switch (name) {
      case 'words':
        this.setState({ words: !state });
        break;
      case 'driver':
        this.setState({ driver: !state });
        break;
      case 'note':
        this.setState({ note: !state });
        break;
      case 'collect':
        this.setState({ collect: !state });
        break;
      case 'connect':
        this.setState({ connect: !state });
        break;
      case 'price':
        this.setState({ price: !state });
        break;
      case 'makeDrive':
        this.setState({ makeDrive: !state });
        break;
      case 'experience':
        this.setState({ experience: !state });
        break;
      case 'bargain':
        this.setState({ bargain: !state });
        break;
      case 'others':
        this.setState({ others: !state });
        break;
      case 'giveUp':
        this.setState({ giveUp: !state });
        break;
      case 'desc':
        this.setState({ desc: !state });
        this.setSelectIntention(0);
        break;
      case 'asce':
        this.setState({ asce: !state });
        this.setSelectIntention(1);
        break;
      default:
        break;
    }
  }
  /**
  *购买意向排序单选
  */
  setSelectIntention(intention) {
    if (intention === 0) {
      this.setState({ asce: false });
    } else if (intention === 1) {
      this.setState({ desc: false });
    }
  }
  /**
  *重置
  */
  resetBtn() {
    this.setState({ words: false });
    this.setState({ note: false });
    this.setState({ driver: false });
    this.setState({ collect: false });
    this.setState({ connect: false });
    this.setState({ price: false });
    this.setState({ makeDrive: false });
    this.setState({ experience: false });
    this.setState({ bargain: false });
    this.setState({ giveUp: false });
    this.setState({ others: false });
    this.setState({ desc: false });
    this.setState({ asce: false });
    this.setState({ time: '选择拜访时间' });
  }
  /**
  *确定
  */
  confimBtn() {
    console.log('确定');
    let all = 1;
    let voicemsg = 0;
    let note = 0;
    let testdrive = 0;
    let collect = 0;
    let stageAll = 1;
    let cg = 0;
    let bj = 0;
    let sy = 0;
    let dt = 0;
    let cj = 0;
    let fq = 0;
    let qt = 0;
    let intention = 0;
    if (this.state.words) {
      voicemsg = 1;
    } else {
      voicemsg = 0;
    }
    if (this.state.note) {
      note = 1;
    } else {
      note = 0;
    }
    if (this.state.driver) {
      testdrive = 1;
    } else {
      testdrive = 0;
    }
    if (this.state.collect) {
      collect = 1;
    } else {
      collect = 0;
    }
    if (this.state.words || this.state.driver || this.state.collect || this.state.note) {
      all = 0;
    }
    if (this.state.words === 0 && this.state.driver === 0 && this.state.collect === 0 &&
      this.state.note === 0) {
      all = 1;
    }
    if (this.state.connect) {
      cg = 1;
    } else {
      cg = 0;
    }
    if (this.state.price) {
      bj = 2;
    } else {
      bj = 0;
    }
    if (this.state.makeDrive) {
      sy = 3;
    } else {
      sy = 0;
    }
    if (this.state.experience) {
      dt = 4;
    } else {
      dt = 0;
    }
    if (this.state.bargain) {
      cj = 5;
    } else {
      cj = 0;
    }
    if (this.state.giveUp) {
      fq = 6;
    } else {
      fq = 0;
    }
    if (this.state.others) {
      qt = 7;
    } else {
      qt = 0;
    }
    if (this.state.connect || this.state.price || this.state.makeDrive || this.state.experience ||
      this.state.bargain || this.state.giveUp || this.state.others) {
      stageAll = 0;
    }
    if (this.state.connect && this.state.price && this.state.makeDrive && this.state.experience &&
      this.state.bargain && this.state.giveUp && this.state.others) {
      stageAll = 1;
    }
    if (this.state.desc) {
      intention = 1;
    } else if (this.state.asce) {
      intention = 2;
    } else {
      intention = 0;
    }
    const { dispatch } = this.props;
    dispatch(fetchMyCustomerList(1, true, false, all, voicemsg, note, testdrive, collect,
      stageAll, cg, bj, sy, dt, cj, fq, qt, intention, this.state.time.length > 6 ? this.state.time : ''));
    const FilterObjMy = {
      voice: voicemsg,
      note,
      testdrive,
      collect,
      cg,
      bj,
      sy,
      dt,
      cj,
      fq,
      qt,
      intention,
      time: this.state.time.length > 6 ? this.state.time : '',
    };
    dispatch(fetchFilterMy(FilterObjMy)); // 选中的筛选项
    if (navigator) {
      this.props.navigator.pop();
    }
  }
  render() {
    return (
      <View style={[style.wrrap, style.flex]}>
        <View style={{ width: '100%', borderBottomWidth: 1, borderColor: '#ddd' }}>
          <NavCon style={[style.flex, style.top]} backName="" currentTitle="筛选条件" onPress={() => this._goBack()} />
        </View>
        <ScrollView>
          <View>
            <View style={style.contentTop}>
              <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleWei]}>
        筛选维度</Text>
              <View style={[style.row, style.flexWrap]}>
                <FilterBtn selected={this.state.words} onPress={() => this.toggleSelect('words', this.state.words)}>有留言</FilterBtn>
                <FilterBtn selected={this.state.note} onPress={() => this.toggleSelect('note', this.state.note)}>有备注</FilterBtn>
                <FilterBtn selected={this.state.driver} onPress={() => this.toggleSelect('driver', this.state.driver)}>有试驾申请</FilterBtn>
                <FilterBtn selected={this.state.collect} onPress={() => this.toggleSelect('collect', this.state.collect)}>已收藏</FilterBtn>
              </View>
              <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleSource]}>
        客户阶段</Text>
              <View style={[style.row, style.flexWrap]}>
                <FilterBtn selected={this.state.connect} onPress={() => this.toggleSelect('connect', this.state.connect)}>初步沟通</FilterBtn>
                <FilterBtn selected={this.state.price} onPress={() => this.toggleSelect('price', this.state.price)}>已报价</FilterBtn>
                <FilterBtn selected={this.state.makeDrive} onPress={() => this.toggleSelect('makeDrive', this.state.makeDrive)}>预约试驾</FilterBtn>
                <FilterBtn selected={this.state.experience} onPress={() => this.toggleSelect('experience', this.state.experience)}>到店体验</FilterBtn>
                <FilterBtn selected={this.state.bargain} onPress={() => this.toggleSelect('bargain', this.state.bargain)}>已成交</FilterBtn>
                <FilterBtn selected={this.state.giveUp} onPress={() => this.toggleSelect('giveUp', this.state.giveUp)}>放弃购买</FilterBtn>
                <FilterBtn selected={this.state.others} onPress={() => this.toggleSelect('others', this.state.others)}>其他</FilterBtn>
              </View>
              <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleSource]}>
          购买意向排序
        </Text>
              <View style={style.row}>
                <FilterBtn selected={this.state.desc} onPress={() => this.toggleSelect('desc', this.state.desc)}>降序</FilterBtn>
                <FilterBtn selected={this.state.asce} onPress={() => this.toggleSelect('asce', this.state.asce)}>升序</FilterBtn>
              </View>
              <Text style={[style.textColor, style.textFontR, style.titleTwo, style.titleSource]}>
            拜访时间
          </Text>
              <View style={style.time}>
                <View style={style.row}>
                  <Image source={require('../../img/detail/cule-choose-time.png')} />
                  <Text style={style.timeText}>{this.state.time}</Text>
                </View>
                <View style={[style.datepicker, { position: 'absolute' }]}>
                  <DatePicker
                    style={{ width: '100%' }}
                    date={this.state.visitDateTime}
                    mode="date"
                    format="YYYY-MM-DD"
                    confirmBtnText="确认"
                    cancelBtnText="取消"
                    showIcon={false}
                    customStyles={{
                      dateIcon: {
                        top: 4,
                      },
                      dateText: {
                        marginLeft: PxToDp(0),
                        color: '#333',
                        fontSize: PxToDp(12),
                      },
                      dateInput: {
                        borderRadius: PxToDp(2),
                        height: 0,
                        width: 0,
                        borderWidth: 0,
                      },
                    }}
                    onDateChange={(date) => {
                      this.setState({ time: date });
                    }}
                  />
                </View>
              </View>
            </View>
          </View>
        </ScrollView>
        <View style={[style.row, style.bottomBtn]}>
          <TouchableOpacity
            style={[style.flex, style.btnReset, style.btn]}
            onPress={() => this.resetBtn()}
          >
            <Text style={[style.textFontR, style.titleTwo, style.textColor]} >重置
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[style.flex, style.btnConfim, style.btn]}
            onPress={() => this.confimBtn()}
          >
            <Text style={[style.textFontR, style.titleTwo, style.white]}>完成
            </Text>
          </TouchableOpacity>
        </View>

      </View>
    );
  }
}

const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  wrrap: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  row: {
    flexDirection: 'row',
  },
  textColor: {
    color: '#000000',
  },
  white: {
    color: '#ffffff',
  },
  textFontR: {
    fontFamily: FontFamilys(),
  },
  titleTwo: {
    fontSize: PxToDp(15),
  },
  titleWei: {
    marginTop: PxToDp(30),
  },
  titleSource: {
    marginTop: PxToDp(25),
  },
  contentTop: {
    paddingLeft: PxToDp(12),
    paddingRight: PxToDp(8),
    flex: 5,
  },
  bottomBtn: {
    height: PxToDp(50),
    flex: 1,
    alignItems: 'flex-end',
  },
  btn: {
    height: PxToDp(50),
    alignItems: 'center',
    justifyContent: 'center',
    borderTopWidth: PxToDp(1),
    borderStyle: 'solid',
    borderColor: '#DDDDDD',
  },
  btnReset: {
    backgroundColor: '#f0f0f0',
  },
  btnConfim: {
    backgroundColor: '#458fff',
  },
  flexWrap: {
    flexWrap: 'wrap',
  },
  time: {
    height: PxToDp(38),
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    paddingLeft: PxToDp(16),
    marginTop: PxToDp(8),
    width: PxToDp(250),
  },
  timeText: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(14),
    color: '#8b8c8e',
    marginLeft: PxToDp(8),
  },
  datepicker: {
    position: 'absolute',
    flex: 1,
    overflow: 'hidden',
    zIndex: 0,
    top: PxToDp(1),
    height: PxToDp(38),
  },
});

export default MyCustomerFilter;
